<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<box>
				<template v-slot:default="gg">
					{{gg.ss}}
				</template>
				
				
				<template v-slot:num="person">
					<!-- {{person.pp}} -->
					<table border="1" cellpadding="0" cellspacing="0">
						<tr v-for="item in person.pp">
							<td>{{item.name}}</td>
							<td>{{item.age}}</td>
						</tr>
					</table>
				</template>
				
			</box>

		</div>
		
     <template id="t1">
		 <div>
			 <p>我是作用域插槽 {{score}}</p>
			 
			 <slot v-bind:ss="score"></slot>
			 
			<slot name="num" v-bind:pp="people" ></slot> 
			 
			 
			 
		 </div>
	 </template> 
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				
			},
			components:{
				box:{
					template:"#t1",
					data(){
						return {
						user:{
							name:'韩梅梅',
							age:18
						},
						score:90,						
						people:[
							{
								name:"张三",
								age:12
							},
							{
								name:'李四',
								age:13
							},
							{
								name:'王二',
								age:14
							}
						]
						
						}
					}
				}
			}
		})
		
		
	</script>
		
	<!-- 作用域插槽:
	其实就是可以传递数据的插槽。子组件中的一些数据想在父组件中使用，必须通过规定的方法来传递。在官方文档中提出了一条规则，**父级模板里的所有内容都是在父级作用域中编译的。子模板里的所有内容都是在子作用域中编译的。**如果你在父组件直接使用子组件中的值，是会报错的。
		(1)匿名插槽的作用域插槽
		为了让子组件中的数据 在父级的插槽内容中可用，我们可以将数据作为元素的一个特性绑定上去：
		
		语法：v-bind:自定义数据名字="子组件中的数据" 
		
		绑定在 元素上的特性（v-bind:list=“user”）被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定        义我们提供的插槽 prop 的名字。
		
		语法：v-slot:default="随意取的
		名字"  // default可省略，简写为v-slot="随意取 的名字"
		
		 注意：
		      父组件中的sonlist可以是随意取的。
		      子组件中list是随意取的，与之对应的是父组件中的users。
		      子组件中的user为数据。
		 
		 具名插槽的作用域插槽
		 与匿名插槽同理，只需要把default替换成插槽的name值即可。
		 -->
	</body>
</html>
